<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/orders.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link">服务预约</a>
                <a href="orders.html" class="nav-link active">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <div class="orders-header">
                <h1>我的订单</h1>
                <div class="order-filters">
                    <div class="search-box">
                        <input type="text" placeholder="搜索订单号或服务类型" onkeyup="searchOrders(this.value)">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="filter-group">
                        <select onchange="filterOrders('status', this.value)">
                            <option value="">全部状态</option>
                            <option value="pending">待付款</option>
                            <option value="paid">待服务</option>
                            <option value="processing">服务中</option>
                            <option value="completed">已完成</option>
                            <option value="cancelled">已取消</option>
                        </select>
                        <select onchange="filterOrders('time', this.value)">
                            <option value="">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="year">今年</option>
                        </select>
                    </div>
                    <button onclick="loadOrders()" class="btn btn-primary" style="margin-left:16px;">刷新订单</button>
                </div>
            </div>

            <div class="orders-list" id="orders-list">
                <!-- 订单卡片由JS动态渲染 -->
            </div>

            <!-- 分页控件 -->
            <div class="pagination" id="pagination">
                <!-- 分页由JS渲染，如需分页可扩展 -->
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
        // 订单状态映射
        const ORDER_STATUS_MAP = {
            0: { text: '待付款', class: 'pending' },
            1: { text: '待服务', class: 'paid' },
            2: { text: '服务中', class: 'processing' },
            3: { text: '已完成', class: 'completed' },
            4: { text: '已取消', class: 'cancelled' }
        };

        // 页面加载后获取订单数据
        document.addEventListener('DOMContentLoaded', async () => {
            await loadOrders();
        });

        // 加载订单数据
        async function loadOrders() {
            const ordersList = document.getElementById('orders-list');
            ordersList.innerHTML = '<div style="text-align:center;padding:40px 0;">加载中...</div>';
            try {
                const response = await petHouseAPI.orders.getAll();
                const orders = response.data || [];
                renderOrders(orders);
            } catch (error) {
                ordersList.innerHTML = '<div style="color:#ef4444;text-align:center;padding:40px 0;">订单加载失败，请刷新重试</div>';
                console.error('订单加载失败:', error);
            }
        }

        // 渲染订单列表
        function renderOrders(orders) {
            const ordersList = document.getElementById('orders-list');
            if (!orders || orders.length === 0) {
                ordersList.innerHTML = '<div style="text-align:center;color:#888;padding:40px 0;">暂无订单，快去预约服务吧！</div>';
                return;
            }
            ordersList.innerHTML = '';
            orders.forEach(order => {
                const statusInfo = ORDER_STATUS_MAP[order.status] || { text: '未知', class: '' };
                const orderCard = document.createElement('div');
                orderCard.className = 'order-card';
                orderCard.innerHTML = `
                    <div class="order-header">
                        <div class="order-info">
                            <span class="order-number">订单号：${order.orderNo}</span>
                            <span class="order-date">${formatDate(order.createdAt)}</span>
                        </div>
                        <span class="order-status ${statusInfo.class}">${statusInfo.text}</span>
                    </div>
                    <div class="order-content">
                        <div class="service-info">
                            <i class="fas fa-paw"></i>
                            <div class="service-details">
                                <h3>${order.serviceName || '-'}</h3>
                                <p>服务时间：${formatDate(order.serviceTime, true)}</p>
                                <p>服务宠物：${order.petName || '-'}</p>
                            </div>
                        </div>
                        <div class="price-info">
                            <span class="price">¥${order.totalAmount != null ? order.totalAmount.toFixed(2) : '--'}</span>
                        </div>
                    </div>
                    <div class="order-actions">
                        ${renderOrderActions(order)}
                        <a href="order-detail.html?id=${order.orderNo}" class="btn btn-text">查看详情</a>
                    </div>
                `;
                ordersList.appendChild(orderCard);
            });
        }

        // 渲染订单操作按钮
        function renderOrderActions(order) {
            switch(order.status) {
                case 0: // 待付款
                    return `<button class="btn btn-primary" onclick="payOrder('${order.orderNo}')">立即付款</button>
                            <button class="btn btn-outline" onclick="cancelOrder('${order.orderNo}')">取消订单</button>`;
                case 2: // 服务中
                    return `<button class="btn btn-primary" onclick="contactService('${order.orderNo}')">联系服务人员</button>`;
                case 3: // 已完成
                    return `<button class="btn btn-primary" onclick="writeReview('${order.orderNo}')">评价服务</button>
                            <button class="btn btn-outline" onclick="bookAgain('${order.orderNo}')">再次预约</button>`;
                default:
                    return '';
            }
        }

        // 时间格式化
        function formatDate(dateStr, onlyDate = false) {
            if (!dateStr) return '-';
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return dateStr;
            const y = d.getFullYear();
            const m = (d.getMonth() + 1).toString().padStart(2, '0');
            const day = d.getDate().toString().padStart(2, '0');
            const h = d.getHours().toString().padStart(2, '0');
            const min = d.getMinutes().toString().padStart(2, '0');
            if (onlyDate) return `${y}-${m}-${day}`;
            return `${y}-${m}-${day} ${h}:${min}`;
        }

        // 下面是原有的操作函数（可保留）
        function payOrder(orderId) { console.log('支付订单:', orderId); }
        function cancelOrder(orderId) { if (confirm('确定要取消这个订单吗？')) { console.log('取消订单:', orderId); } }
        function contactService(orderId) { console.log('联系服务人员:', orderId); }
        function writeReview(orderId) { console.log('评价服务:', orderId); }
        function bookAgain(orderId) { console.log('再次预约:', orderId); }
        function changePage(direction) { console.log('切换页面:', direction); }
    </script>
</body>
</html> 